<template>
  <div>
    <div class="page-body mt10">
      <div class="body-left">
        <p class="pkg-title">
          <span class="crown-icon"></span>
          <span class="color-g fb">AI加量包用途</span>
        </p>
        <p class="sub-title">尊享阅读、转换等15+权益</p>
        <ul class="right-list">
          <li v-for="(item, i) in fnList" :key="i" class="right-item">{{ item.name }}</li>
        </ul>
        <div class="mt25">
          <span class="detail-btn" @click="openEnergyOrder">
            <i>查看我的能量明细</i>
            <i class="el-icon-arrow-right"></i>
          </span>
        </div>
      </div>
      <div class="body-right">
        <div class="pacakge__list">
          <swiper class="swiper" :options="swiperOption" ref="myswiper">
            <swiper-slide v-for="(item) in products" :key="item.id">
              <product-item
                :item="item"
                :active-item-id="selectedProduct.id"
                :user-info="userInfo"
                :showVipDiscount="showVipDiscount"
                @select="onSelectedProduct(item)"
                />
            </swiper-slide>
          </swiper>
          <div class="next__item">
            <svg-icon icon-class="swiper-right" class=""></svg-icon>
          </div>
          <div class="prev__item">
            <svg-icon icon-class="swiper-right" class=""></svg-icon>
          </div>
        </div>
        <div class="pay-tips" v-if="selectedProduct.describe">
          <svg-icon iconClass="energy" :size="16"/>
          {{ selectedProduct.describe }}
        </div>
        <div class="pay-info">
          <PaymentCode
            :width="130"
            :height="130"
            :padding="5"
            :isAgree.sync="isAgree"
            :pkgId="pkgId"
            :product="selectedProduct"
            :productPrice="productPrice"
            :openPos="openPos"
            :isExtraProducts="true"
            :otherParamsStr="otherParamsStr"
            @paySuccess="$emit('paySuccess')"/>
          <div class="pay-info-right">
            <div class="total__price-box mt10">
              <p class="total__label">实付款：</p>
              <div class="total__price">
                <span><em class="fs18">￥</em>{{ productPrice | moneyToyuan}}</span>
              </div>
              <!-- <p class="origin__price ml5"><span>￥{{  selectedProduct.origin_price | moneyToyuan }}</span></p> -->
              <div class="total__save ml10">立省{{ selectedProduct.origin_price - productPrice | moneyToyuan }}元</div>
            </div>
            <ProtocolView v-model="isAgree" :selectedProduct="selectedProduct"></ProtocolView>
            <div class="fs12 mt10">能量包购买后不支持退款</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import ProductItem from './product-item.vue'
import ProtocolView from '@/components/pay/protocol-view.vue'
import PaymentCode from '@/components/payment-code/src/main'
import { getExtraProducts } from '@/api/energy'
import { getProductsActivity } from '@/api/rights'
export default {
  name: 'PayEnergyCom',
  components: {
    Swiper,
    SwiperSlide,
    ProductItem,
    PaymentCode,
    ProtocolView
  },
  props: {
    pkgId: {
      type: String,
      default: ''
    },
    openPos: String,
    fnList: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      isAgree: false,
      selectedProduct: {},
      products: [],
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 10,
        navigation: {
          nextEl: '.next__item',
          prevEl: '.prev__item'
        }
      },
      hasVipDiscount: false
    }
  },
  computed: {
    ...mapGetters(['appInfo', 'appCfg', 'userInfo', 'hasLogin']),
    otherParamsStr () {
      const params = {}
      const act_ids = []
      if (this.userInfo.is_member) {
        // eslint-disable-next-line sonarjs/no-duplicate-string
        const vipDiscount = this.selectedProduct['vip-discount']?.[0]
        if (vipDiscount?.id) {
          act_ids.push(vipDiscount.id)
        }
      }
      params['actids'] = act_ids.join(',')
      return JSON.stringify(params)
    },
    productPrice () {
      let price = this.selectedProduct.price

      if (!this.hasLogin || this.userInfo.is_member) {
        const vipDiscount = this.selectedProduct['vip-discount']?.[0]
        if (vipDiscount?.setting) {
          price = vipDiscount.setting.price
        }
      }

      price = Math.max(1, price)
      return price
    },
    showVipDiscount () {
      if (!this.hasLogin || this.userInfo.is_member) {
        return this.hasVipDiscount
      }
      return false
    }
  },
  watch: {
    hasLogin () {
    }
  },
  async created () {
    this.isAgree = !this.appInfo.needProtocol
    this.getPackage()
  },
  methods: {
    getPackage () {
      const params = { product_type: 6, size: 10 }
      getExtraProducts(params).then(res => {
        const data = res?.data?.list || []
        this.getActivity(data)
      })
    },
    getActivity (productList) {
      const params = { 'product_id': productList.map(it => it.id) }
      getProductsActivity(params).then(res => {
        const list = res?.data?.list || []
        let hasVipDiscount = false
        list.forEach(it => {
          const productIds = it.product_ids || []
          if (it.setting) {
            it.setting = JSON.parse(it.setting)
          }
          productIds.forEach(id => {
            const item = productList.find(product => product.id === id) || {}
            if (item[it.act_fixed_id]) {
              item[it.act_fixed_id].push(it)
            } else {
              item[it.act_fixed_id] = [it]
            }
            if (it.act_fixed_id === 'vip-discount') {
              hasVipDiscount = true
            }
          })
        })
        this.products = productList
        this.selectedProduct = this.products[0]

        this.hasVipDiscount = hasVipDiscount
      })
    },
    onSelectedProduct (item) {
      this.selectedProduct = item
    },
    openEnergyOrder () {
      this.$xz('xz_switch_dialog', 'XZMainWindow', true)
      this.$xz('xz_switch_tab', 5)
      this.$xz('xz_switch_dialog', this.openPos, false)
    }
  }
}
</script>
<style lang="scss" scoped>
$--color-red: #F15855 !default;
$--color-primary-g: #F8DE9D !default;
$--color-primary-bg: rgba($color: #fff, $alpha: 0.05);
$--color-primary-bg1: rgba($color: #fff, $alpha: 0.1);
.color-red{
  color: $--color-red;
}
.color-g{
  color: $--color-primary-g;
}

.page-body{
  display: flex;
}
.body-left{
  flex: 180px 0 0;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  border-radius: 10px;
  background: url('~@/assets/right-bg.png') 0 bottom no-repeat,linear-gradient( 180deg, #41424A 0%, #2B2C33 100%);;
  text-align: center;
}
.crown-icon{
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-bottom: -4px;
  margin-right: 6px;
  background: url('~@/assets/crown.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.pkg-title{
  margin: 0 -10px;
}
.sub-title{
  margin-top: 5px;
  font-size: 12px;
  color: rgba($color: $--color-primary-g, $alpha: 0.7);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
  padding: 0 10px;
}
.right-list{
  flex: 1;
  max-height: 300px;
  overflow: auto;
  margin-top: 20px;
  text-align: left;
  padding: 0 25px;
}
.right-item{
  font-size: 12px;
  color: rgba($color: $--color-primary-g, $alpha: 0.7);
  &+.right-item{
    margin-top: 16px;
  }
  &::before{
    content: ' ';
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-right: 10px;
    margin-bottom: 2px;
    background-color: rgba($color: $--color-primary-g, $alpha: 0.7);
    border-radius: 50%;
  }
}
.detail-btn{
  color: rgba($color: $--color-primary-g, $alpha: 0.7);
  font-size: 12px;
  cursor: pointer;
  &:hover{
    color: $--color-primary-g;
  }
  .el-icon-arrow-right{
    margin-left: 5px;
    vertical-align: -0.1em;
  }
}
.body-right{
  margin-left: 5px;
  margin-right: -5px;
  margin-top: -5px;
  flex: 1 1 100%;
  padding: 0 5px;
  overflow: hidden;
}
.pacakge__list {
  min-height: 160px;
  position: relative;
  .prev__item,.next__item {
    font-size: 30px;
    z-index: 1;
    position: absolute;
    top: 50%;
    right: -5px;
    transform: translateY(-50%);
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    opacity: 0.5;
    &.swiper-button-disabled {
      display: none;
    }
    &:hover {
      opacity: 1;
    }
  }
  .prev__item {
    right: 0;
    left: -5px;
    transform: rotate(-180deg) translateY(50%);
  }
}

.pay-tips{
  min-height: 30px;
  background: rgba(203,136,255,0.1);
  border-radius: 8px;
  padding: 7px 16px;
  line-height: 16px;
  font-size: 12px;
  color: rgba(203, 136, 255, .8);
  margin-top: 10px;
  word-break: break-word;
  .svg-icon {
    margin-right: 4px;
  }
}

.pay-info{
  display: flex;
  margin-top: 10px;
  min-height: 205px;
  padding: 24px 24px 24px 27px;
  background-color: $--color-primary-bg;
  border-radius: 10px;
}
.pay-info-right{
  margin-left: 27px;
}
.total__label{
  font-size: 12px;
  color: #fff;
}

.total__price {
  margin-right: 4px;
  font-size: 36px;
  span {
    display: block;
    color: #F15855;
    font-weight: bold;
    line-height: 1.3;
  }
  em {
    font-size: 16px;
  }
}
.total__price-box {
  margin: 10px 0;
  align-items: baseline;
  display: flex;
  font-size: 12px;
  white-space: nowrap;
}
.origin__price {
  color: rgba(#fff, 0.5);
  font-size: 12px;
  text-decoration: line-through;
}
.total__save {
  color: #fff;
  background: linear-gradient(90deg, #FFAE00 0%, #FF6C8F 100%);
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  font-weight: bold;
}
.more__rights-dialog{
  /deep/.el-dialog__body{
    padding: 8px 30px 30px;
  }
}
.more__rights {
  h4 {
    font-size: 16px;
    color: #F8DE9D;
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
    &::before,&::after{
      content: ' ';
      display: inline-block;
      width: 68px;
      height: 1px;
      vertical-align: middle;
    }
    &::before{
      margin-right: 10px;
      background: linear-gradient( 90deg, rgba(248,222,157,0) 0%, #F8DE9D 100%);
    }
    &::after{
      margin-left: 10px;
      background: linear-gradient( 90deg, #F8DE9D 0%, rgba(248,222,157,0) 100%);
    }
  }
  .header {
    display: flex;
    height: 50px;
    font-size: 14px;
    color: #fff;
    align-items: flex-end;
    .svg-icon {
      font-size: 28px;
      position: relative;
      margin-right: 2px;
      top: 4px;
    }
    span {
      height: 50px;
      line-height: 50px;
      border-radius: 10px 10px 0 0;
      position: relative;
      text-align: center;
      overflow: hidden;
      &::after,&::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        right: -25px;
        width: 61px;
        height: 58px;
        background: linear-gradient( 46deg, rgba(255,255,255,0.27) 0%, rgba(255,255,255,0) 43%);
        border-radius: 4px 4px 4px 4px;
        transform: rotate(45deg);
      }
      &::before {
        right: -45px;
      }
    }
    span:nth-of-type(1) {
      width: 200px;
      background: linear-gradient( 90deg, #5B89BD 0%, #45B096 41%);
    }
    span:nth-of-type(2) {
      width: 160px;
      background: linear-gradient( 90deg, #A5A5A5 0%, #5C5C5C 100%);
    }
    span:nth-of-type(3) {
      flex: 1;
      color: #7B4801;
      font-weight: bold;
      background: linear-gradient( 90deg, #FFF8EA 0%, #FFE6B5 100%);
    }
  }
}
.more__rights-content {
  max-height: 294px;
  overflow-y: scroll;
  margin-right: -11px;
  padding-right: 5px;
  &::-webkit-scrollbar {
    background-color: #34353B;
  }
  .item {
    display: flex;
    font-size: 12px;
    border-bottom: 1px solid rgba($color: #fff, $alpha: 0.2);
    span {
      padding: 13px 10px;
      background: rgba($color: #fff, $alpha:0.1);
      text-align: center;
    }
    .vip  {
      flex: 1;
      background-color: rgba($color: #fff, $alpha: 0.15);
      color: #F8DE9D;
      font-weight: bold;
    }
    .svg-icon{
      font-size: 14px;
    }
    span:nth-of-type(1) {
      width: 200px;
    }
    span:nth-of-type(2) {
      width: 160px;
      border-left: 1px solid rgba($color: #fff, $alpha: 0.1);
    }
  }
  p:last-of-type {
    border: none;
  }
}
</style>
